<template>
  <div>
    <div :id="id" :style="style"></div>
  </div>
</template>

<script>
export default {
  name: 'Pie1',
  data () {
    return {
      // echarts实例
      pie1: ''
    }
  },
  props: {
    // 父组件需要传递的参数：id，width，height，option
    id: {
      type: String
    },
    width: {
      default: '100%',
      type: String
    },
    height: {
      default: '100%',
      type: String
    },
    option: {
      type: Object,
      // Object类型的prop值一定要用函数return出来，不然会报错。原理和data是一样的，
      // 使用闭包保证一个vue实例拥有自己的一份props
      default () {
        return {
          // title: {
          //   text: '新自信全年营收'
          // },
          // tooltip: {
          //   trigger: 'item',
          //   formatter: '{d} %'
          // },
          tooltip: {
            trigger: 'item',
            formatter: '{b}<br/>{c}元 ({d}%)'
          },
          legend: {
            itemWidth: 20,
            itemHeight: 10,
            right: 50
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              selectedMode: 'single',
              radius: [0, '40%'],
              center: ['50%', '55%'],
              label: {
                position: 'inner'
              },
              labelLine: {
                show: false
              },
              data: [
                {value: 335, name: '鼠标', itemStyle: {normal: {color: '#086c35'}}},
                {value: 679, name: '键盘'},
                {value: 1548, name: '显示器'}
              ]
            },
            {
            type: 'pie',
            center: ['50%', '55%'],
            radius: ['75%', '55%'],
            label: {
              position: 'outer',
              alignTo: 'none',
              bleedMargin: 5,
              formatter: '{b}',
              textStyle: {
                color: '#100f0f',
                fontSize: 20
              }
            },
            emphasis: {
              scale: true,
              scaleSize: 7,
              focus: 'self'
            },
            data: [{
              value: 335,
              name: '营收',
              itemStyle: {
                normal: {
                  color: '#ffd285'
                }
              },
            }, {
              value: 180,
              name: '支出',
              itemStyle: {
                normal: {
                  color: '#87CEFA'
                }
              },
            }]
          }]
        }
      }
    }
  },
  computed: {
    style () {
      return {
        height: this.height,
        width: this.width
      }
    }
  },
  created () {
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.chart = this.$echarts.init(document.getElementById(this.id))
      this.chart.setOption(this.option)
    }
  }
}
</script>

<style scoped>

</style>
